<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import {ref, onMounted, reactive} from 'vue'
import { useRouter, useRoute  } from 'vue-router'
import { updatePwdApi } from '../../api/hr'

const route = useRoute()
const router = useRouter()
const username = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

onMounted(async () => {
  const user = JSON.parse(localStorage.getItem('hrInfo'))
  if (user && user.username) {
    username.value = user.username
  }
})
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?','提示',{
      confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',
  }).then(() => {
      // 1.删除登录信息
      localStorage.removeItem('hrInfo')
      ElMessage.success('退出成功')
      // 2.跳转到登录页面
      router.push('/')
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消退出登录',
    })
  })
}
// 密码表单数据
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const passwordFormRef = ref(null)
// 密码表单验证规则
const passwordRules = reactive({
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})
const openEditPwd = () => {
  if (passwordFormRef.value){
    passwordFormRef.value.resetFields()
  }
  dialogFormVisible.value = true
}
const editPwd = async () => {
  try {
    await passwordFormRef.value.validate()
    // 这里调用API修改密码
    const result = await updatePwdApi(passwordForm.value.oldPassword, passwordForm.value.newPassword)
    if(result.code){
      ElMessage.success('密码修改成功')
      dialogFormVisible.value = false
      router.push('/')
    }else{
      ElMessage.error(result.msg)
    }
  } catch (error) {
    if (error !== 'validate') {
      ElMessage.error('表单验证不通过')
    }
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- Header 区域 -->
      <el-header class="header">
        <img src="/logo.png" alt="" height="50px">
        <span class="right_tool">
          <a href="javascript:;" @click="openEditPwd">
            <el-icon><EditPen /></el-icon> 修改密码 &nbsp;&nbsp;&nbsp; |  &nbsp;&nbsp;&nbsp;
          </a>
          <a href="javascript:;" @click="logout">
            <el-icon><SwitchButton /></el-icon> 退出登录【{{username}}】
          </a>
        </span>
      </el-header>
      <!-- 修改密码dialog -->
      <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
        <el-form :model="passwordForm" 
          ref="passwordFormRef"
          :rules="passwordRules">
          <el-form-item label="原密码" prop="oldPassword" :label-width="formLabelWidth">
            <el-input v-model="passwordForm.oldPassword" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
            <el-input v-model="passwordForm.newPassword" autocomplete="off" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" :label-width="formLabelWidth">
            <el-input v-model="passwordForm.confirmPassword" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="editPwd">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
      
      <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px" class="aside">
          <el-menu :default-active="route.path" router>
            <el-menu-item index="/hr/hmenu1">
              <el-icon><HomeFilled /></el-icon>简历管理
            </el-menu-item>
            <el-menu-item index="/hr/posManage">
              <el-icon><UserFilled /></el-icon>职位管理
            </el-menu-item>            
            <el-menu-item index="/hr/hmenu3">
              <el-icon><HomeFilled /></el-icon>消息
            </el-menu-item>
            <el-menu-item index="/hr/hmenu4">
              <el-icon><UserFilled /></el-icon>小助手
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      
    </el-container>
  </div>
</template>

<style scoped>
/* 采用推荐方案1 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-image: linear-gradient(to left, #0a4b78, #0083b0, #00b4db, #50c9c3, #96deda);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.user-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  color: white !important;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.action-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.right_tool{
  float: right;
  line-height: 60px;
}

a {
  color: white;
  text-decoration: none;
}

.aside {
  width: 220px;
  border-right: 1px solid #ccc;
  height: 730px;
}
</style>
